<!-- 分页结果 -->
<!--分页-->
<template>
  <div class="margin-top-20 page-result">
    <!--<el-card class="margin-top-20" v-for="i in 7" :key="i">-->
<!---->
    <el-card class="margin-top-20">          
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        >
        
          <div style="display: flex; justify-content: flex-start">
            
            <div class="up-info__avatar">
 

              <a href="./CoreList.vue#c1" target="_blank" class="anchor">
                <img
                  src="http://pics0.baidu.com/feed/574e9258d109b3de7694cc410288bd87800a4caa.jpeg"
                  
                  width="185px"
                  height="90px"
                  style="margin-leif:150px;"
                />
              </a>
              <div class="time">01:13</div>
            </div>
          
            <div  class="up-info__info">
              <div>
                <span class="font-bolder">小鬼演唱会疑似被鬼屋附身</span>
              </div>
              <div><span>简介</span><span>微博 太哈人了</span></div>
              <div class="info-list-name">
                西姆斯饼饼 | 2021-06-01 11:30:26 发布
              </div>
              

            </div>
        </div>


      </div>     
      </div>             
    </el-card>


<el-card class="margin-top-20">
  <!--一级分类-->
        
      <div style="display: flex; justify-content: flex-end width:60px;height:70px"><!--留-->
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        ><!--留-->
        <table class="total-table">
          <tr>
           <!-- <td style="width:100px;">核心一览</td>
            
            <td style="width:100px;">爆款分析</td>
          
            <td style="width:100px;">评论分析</td>
        
            <td style="width:100px;">弹幕分析</td>
            
            <td style="width:100px;">观众画像</td></td>-->
            
                      

          </tr>
        </table>    
        </div>
    

      </div>
       

    <div class="line-1px" />
      <div style="display: flex; justify-content: space-around">
        
        <table>
          <tr style="width:0px;">
            <td style="width:1000px;">性别分布</td>   
            
            <td style="width:900px;">年龄分布</td>            
                 
          </tr>
        </table>
        
      </div>
 <!--条形图-->    




 <el-card class="margin-top-20"> 

    <div class="line-1px" />

      <div style="display: flex; justify-content: space-around">

        <div id="main" style="width: 500px;height:300px;" ></div>

      </div>




 </el-card>


<!--end-->

<!--视频标签-->

    

<!--end-->    
      </el-card>




<!--e分页5-->

<el-card class="margin-top-20">
         
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          ">

       <table class="total-table">
          


        </table>  

        </div>

      </div>
    </el-card>

<!---->


  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "",
  data: function () {
    return {
 
    };
  },

  components: {},

  computed: {},

  mounted: function () {
    this.line()
  },

  methods: {
    //第一个图
    line(){
      var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      var weatherIcons = {
          'Sunny': ROOT_PATH + '/data/asset/img/weather/sunny_128.png',
          'Cloudy': ROOT_PATH + '/data/asset/img/weather/cloudy_128.png',
          'Showers': ROOT_PATH + '/data/asset/img/weather/showers_128.png'
};

option = {

    tooltip: {
        trigger: 'item',
        //formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        bottom: 10,
        left: 'center',
        data: ['男', '女']
    },
    series: [
        {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
                {

                    label: {
                       
                        backgroundColor: '#eee',
                        borderColor: '#777',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            title: {
                                color: '#eee',
                                align: 'center'
                            },
                            abg: {
                                backgroundColor: '#333',
                                width: '100%',
                                align: 'right',
                                height: 25,
                                borderRadius: [4, 4, 0, 0]
                            },
                            Sunny: {
                                height: 30,
                                align: 'left',
                                backgroundColor: {
                                    image: weatherIcons.Sunny
                                }
                            },
                            Cloudy: {
                                height: 30,
                                align: 'left',
                                backgroundColor: {
                                    image: weatherIcons.Cloudy
                                }
                            },
                            Showers: {
                                height: 30,
                                align: 'left',
                                backgroundColor: {
                                    image: weatherIcons.Showers
                                }
                            },
                            weatherHead: {
                                color: '#333',
                                height: 24,
                                align: 'left'
                            },
                            hr: {
                                borderColor: '#777',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            value: {
                                width: 20,
                                padding: [0, 20, 0, 30],
                                align: 'left'
                            },
                            valueHead: {
                                color: '#333',
                                width: 20,
                                padding: [0, 20, 0, 30],
                                align: 'center'
                            },
                            rate: {
                                width: 40,
                                align: 'right',
                                padding: [0, 10, 0, 0]
                            },
                            rateHead: {
                                color: '#333',
                                width: 40,
                                align: 'center',
                                padding: [0, 10, 0, 0]
                            }
                        }
                    }
                },
                {value: 55, name: '男'},
                {value: 45, name: '女'},
               
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

option && myChart.setOption(option);





//到此结束
  
    
    }
  
  },
};
</script>
<style lang="scss" scoped>
.page-result {
  height: 1000px;

  .column-1px {
    border-left: 1px solid #f6f7fb;
    margin: 0 20px;
    height: 120px;
  }
  .up-info__avatar {
    width: 184px;
    height: 115px;
    position: relative;

    margin-right: 16px;
    border-radius: 2px;
    text-align: center;

    .time {
      color: #999;
      margin-top: 10px;
      display: block;
      width: 39px;
      height: 17px;
      background: #000;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 2px 0 2px 0;
      color: #fff;
      font-size: 12px;
      text-align: center;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .up-info__info {
    height: 120px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-left: 10px;
    .info-list-name {
    }
    .tagList {
      text-align: left;
      display: flex;
      flex-wrap: wrap;
      margin-right: -4px;
      .tag {
        color: #909399;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        margin-right: 4px;
        margin-bottom: 4px;
        text-align: center;
        padding: 1px 3px;
      }
    }
  }
}
</style>
